<template>
  <div class="main">
    <div class="head">
      <div class="title">AIGC-Jobs智能求职系统</div>
    </div>
    
    <!-- 内容盒子 -->
    <div class="content">
      <!-- 左侧内容 -->
      <div class="content-left">
        <!-- 热门技能TOP10词云 -->
        <div class="panel">
          <div class="p-title">热门技能TOP10词云</div>
          <div class="p-content">
            <SkillWordCloud />
          </div>
        </div>
        
        <!-- 学历要求分布 -->
        <!-- 在左侧内容区域的学历要求分布面板中使用 -->
        <div class="panel">
          <div class="p-title">学历要求分布</div>
          <div class="p-content">
            <EducationFunnel />
          </div>
        </div>
        
        <!-- 学历-平均薪资分布 -->
        <div class="panel">
          <div class="p-title">学历-平均薪资分布</div>
          <div class="p-content">
            <EducationSalary />
          </div>
        </div>
      </div>
      
      <!-- 中间内容 -->
      <div class="content-center">
        <!-- 各市平均薪资图 -->
        <div class="panel map-panel">
          <!-- 新增按钮区域 - 在标题栏之上 -->
          <div class="top-buttons-container">
            <button class="top-action-btn" @click="navigateTo('market/jobs')">
              求职市场
            </button>
            <button class="top-action-btn" @click="navigateTo('career-life')">
              求职生活
            </button>
            <button class="top-action-btn" @click="navigateTo('resume-analysis')">
              简历分析
            </button>
            <button class="top-action-btn" @click="navigateTo('mock-interview')">
              模拟面试
            </button>
            <button class="top-action-btn" @click="navigateTo('ai-chat')">
              智能问答
            </button>
            <button class="logout-btn top-action-btn" @click="logout">
              退出登录
            </button>
          </div>
          <div class="p-title">
            <span class="title-text">各省市平均薪资地图</span>
          </div>
          <div class="p-content">
            <ChinaMap :salaryData="salaryData" />
          </div>
        </div>
        
        <!-- 城市-职位需求关系 -->
        <div class="panel">
          <div class="p-title">城市-职位需求关系</div>
          <div class="p-content">
            <CityJobHeatmap :cityJobData="cityJobData" />
          </div>
        </div>
      </div>
      
      <!-- 右侧内容 -->
      <div class="content-right">
        <!-- 城市-薪资占比排行 -->
        <div class="panel">
          <div class="p-title">城市-薪资占比排行</div>
          <div class="p-content">
            <CitySalaryBar />
          </div>
        </div>
        
        <!-- 公司热度 -->
        <div class="panel">
          <div class="p-title">公司热度</div>
          <div class="p-content">
            <CompanyHeatScatter />
          </div>
        </div>
        
        <!-- 学历-最小薪资分布 -->
        <div class="panel">
          <div class="p-title">城市-经验关系</div>
          <div class="p-content">
            <EducationMinSalary />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CityJobHeatmap from '@/components/CityJobHeatmap.vue'
import ChinaMap from '@/components/ChinaMap.vue'
import SkillWordCloud from '@/components/SkillWordCloud.vue'
import EducationFunnel from '@/components/EducationFunnel.vue'
import EducationSalary from '@/components/EducationSalary.vue'
import CityLinkedSalary from '@/components/CityLinkedSalary.vue'
import CompanyHeatScatter from '@/components/CompanyHeatScatter.vue'
import CitySalaryBar from '@/components/CitySalaryBar.vue'
import { removeToken } from '@/utils/auth'
import axios from 'axios'
import { getChartApiUrl } from '@/api/config'


export default {
  name: 'Home',
  components: {
    ChinaMap,
    SkillWordCloud,
    EducationFunnel,
    EducationSalary,
    CityJobHeatmap,
    EducationMinSalary: CityLinkedSalary,
    CompanyHeatScatter,
    CitySalaryBar
  },
  data() {
    return {
      currentTime: '',
      salaryData: [],
      cityJobData: []
    }
  },
  mounted() {
    this.updateTime()
    setInterval(this.updateTime, 1000)
    // 获取图表数据
    this.fetchChartData()
  },
  methods: {
    updateTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const seconds = String(now.getSeconds()).padStart(2, '0')
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    
    // 获取图表数据
    async fetchChartData() {
      try {
        // 获取薪资数据
        await this.fetchSalaryData()
        // 获取城市职位数据
        await this.fetchCityJobData()
      } catch (error) {
        console.error('获取图表数据失败:', error)
      }
    },
    
    // 获取薪资数据
    async fetchSalaryData() {
      try {
        const response = await axios.post(getChartApiUrl('GET_CITY_AVERAGE_SALARY'))
        console.log('薪资数据响应:', response.data);
        if (response.data.code === 200) {
          this.salaryData = response.data.data
        } else {
          console.error('获取薪资数据失败:', response.data.message)
        }
      } catch (error) {
        console.error('请求薪资数据出错:', error)
      }
    },
    
    // 获取城市职位数据
    async fetchCityJobData() {
      try {
        const response = await axios.get(getChartApiUrl('GET_CITY_AND_JOB_TITLE_AND_JOB_OPENINGS'))
        console.log('城市职位数据响应:', response.data);
        if (response.data.code === 200) {
          this.cityJobData = response.data.data
        } else {
          console.error('获取城市职位数据失败:', response.data.message)
        }
      } catch (error) {
        console.error('请求城市职位数据出错:', error)
      }
    },
    navigateTo(route) {
      this.$router.push(`/${route}`)
    },
    logout() {
      // 清除认证信息
      removeToken()
      sessionStorage.clear()
      localStorage.removeItem('user')
      
      // 跳转到登录页
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.main {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.5rem; /* 减小间距 */
  color: #fff;
  background: #010e50 url(@/assets/images/bg.jpg) center top no-repeat;
  background-size: 100% auto;
  overflow: hidden; /* 防止滚动 */
}

.header-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.current-time {
  opacity: 0.8;
  color: #fff;
  font-size: 14px;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 16px;
  background: rgba(255, 107, 107, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.5);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  backdrop-filter: blur(10px);
}

.logout-btn:hover {
  background: rgba(255, 107, 107, 0.3);
  border-color: rgba(255, 107, 107, 0.8);
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
  transform: translateY(-1px);
}

.logout-icon {
  font-size: 16px;
}

.head .title {
  text-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
  text-align: center;
  line-height: 80px;
  letter-spacing: 4px;
  font-size: 40px;
  font-weight: bolder;
}

/* 顶部按钮容器样式 */
.top-buttons-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  padding: 15px 15px;
  background: rgba(0, 35, 120, 0.2);
  border-bottom: 1px solid rgba(100, 162, 255, 0.3);
  flex-shrink: 0;
  min-height: 60px;
  height: 15%;
}

/* 顶部按钮样式 */
.top-action-btn {
  padding: 6px 16px;
  background: rgba(0, 35, 120, 0.8);
  border: 1px solid rgba(100, 162, 255, 0.6);
  border-radius: 4px;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  backdrop-filter: blur(5px);
  min-width: 80px;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.top-action-btn:hover {
  background: rgba(2, 88, 240, 0.9);
  border-color: rgba(100, 162, 255, 0.8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 让带有 logout-btn 的按钮覆盖默认的 top-action-btn 视觉 */
.top-action-btn.logout-btn {
  background: rgba(255, 107, 107, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.5);
  color: #fff;
}

.top-action-btn.logout-btn:hover {
  background: rgba(255, 107, 107, 0.3);
  border-color: rgba(255, 107, 107, 0.8);
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
  transform: translateY(-1px);
}

/* 地图面板特殊样式 */
.map-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.map-panel .p-content {
  flex-grow: 1;
  margin: 0.2rem 0.2rem 0.2rem 0.2rem;
  position: relative;
  max-height: calc(100% - 90px); /* 为按钮区域和标题预留空间 */
}

.content {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: 25% 1fr 25%;
  gap: 0.3rem; /* 减小间距 */
  padding: 0 0.3rem 0.3rem 0.3rem; /* 减小内边距 */
  overflow: hidden; /* 防止滚动 */
}

.content .content-left {
  display: grid;
  grid-template-rows: 38% 1fr 1fr;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.3rem; /* 减小间距 */
  overflow: hidden; /* 防止滚动 */
}

.content .content-center {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.3rem; /* 减小间距 */
  overflow: hidden; /* 防止滚动 */
}

.content .content-right {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(1, 1fr);
  gap: 0.3rem; /* 减小间距 */
  overflow: hidden; /* 防止滚动 */
}

.panel {
  border: 1px solid rgba(100, 162, 255, .2);
  position: relative;
  background: rgba(0, 35, 120, .36);
  display: flex;
  flex-direction: column;
}

.panel:after, .panel:before {
  position: absolute;
  content: "";
  width: 20px;
  height: 30px;
}

.panel:before {
  border-left: 1px solid #0258f0;
  border-top: 1px solid #0258f0;
  left: -1px;
  top: -1px;
}

.panel:after {
  border-right: 1px solid #0258f0;
  border-bottom: 1px solid #0258f0;
  right: -1px;
  bottom: -1px;
}

.panel .p-title {
  height: 30px; /* 减小标题高度 */
  font-size: 16px; /* 减小字体大小 */
  line-height: 30px;
  width: 100%;
  font-weight: 600;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  flex-grow: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-text {
  flex-shrink: 0;
}

.panel .p-title:after {
  position: absolute;
  content: "";
  width: 20%;
  height: 1px;
  background: #0258f0;
  left: 5%;
  opacity: 0.4;
  bottom: 0;
}

.panel .p-content {
  flex-grow: 1;
  margin: 0.2rem 0.2rem 0.2rem 0.2rem;
  position: relative;
}

.plain-panel {
  border: 0;
  background: none;
}

.plain-panel::before,
.plain-panel::after {
  border: 0;
}

.chart {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 防止图表内部滚动 */
}

.chart:empty {
  border: 1px dashed #ccc;
  opacity: 0.3;
}

.chart:empty::after {
  content: "图表";
  position: absolute;
  color: white;
  top: 50%;
  left: 50%;
  margin-top: -1rem;
  margin-left: -1rem;
}
</style>